// 新增Form
import {
  ProFormRadio,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  StepsForm,
} from '@ant-design/pro-components';
import '@umijs/max';
import { Modal } from 'antd';
import React from 'react';

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.InterfaceInfo>;
export type CreateModalProps = {
  onCancel: (flag?: boolean, formVals?: FormValueType) => void;
  onSubmit: (values: FormValueType) => Promise<void>;
  createModalOpen: boolean;
  values: Partial<API.InterfaceInfo>;
};
const CreateModal: React.FC<CreateModalProps> = (props) => {
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            bodyStyle={{
              padding: '32px 40px 48px',
            }}
            destroyOnClose
            title={'配置接口信息'}
            open={props.createModalOpen}
            footer={submitter}
            onCancel={() => {
              props.onCancel();
            }}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={props.onSubmit}
    >
      <StepsForm.StepForm
        initialValues={{
          // 显示初始值，修改的时候，显示原来的值
          name: props.values.name,
          description: props.values.description,
          method: props.values.method,
          url: props.values.url,
        }}
        title={'面板信息'}
      >
        <ProFormText
          name="name"
          label={'接口名称'}
          width="md"
          rules={[
            {
              required: true,
              message: '接口名称必须输入！',
            },
          ]}
        />
        <ProFormTextArea
          name="description"
          width="md"
          label={'接口描述'}
          placeholder={'请输入至少五个字符'}
          rules={[
            {
              required: true,
              message: '请输入至少五个字符的接口描述！',
              min: 5,
            },
          ]}
        />
        <ProFormSelect
          name="method"
          label={'请求方法'}
          valueEnum={{
            GET: 'GET',
            PUT: 'PUT',
            DELETE: 'DELETE',
            POST: 'POST',
            HEAD: 'HEAD',
            PATCH: 'PATCH',
            OPTIONS: 'OPTIONS',
            CONNECT: 'CONNECT',
            TRACE: 'TRACE',
          }}
          placeholder="GET"
          rules={[{ required: true, message: '请选择请求方式!' }]}
        />
        <ProFormText
          name="url"
          label={'请求路径'}
          width="md"
          rules={[
            {
              required: true,
              message: '请求路径必须输入！',
            },
          ]}
        />
      </StepsForm.StepForm>
      <StepsForm.StepForm
        initialValues={{
          requestParams: props.values.requestParams,
          requestHeader: props.values.requestHeader,
          responseHeader: props.values.responseHeader,
          status: props.values.status,
        }}
        title={'配置接口请求参数'}
      >
        <ProFormText
          name="requestParams"
          label={'请求参数'}
          width="md"
          rules={[
            {
              required: true,
              message: '请求参数必须输入！',
            },
          ]}
        />
        <ProFormText
          name="requestHeader"
          label={'请求头'}
          width="md"
          rules={[
            {
              required: true,
              message: '请求头必须输入！',
            },
          ]}
        />
        <ProFormText
          name="responseHeader"
          label={'响应头'}
          width="md"
          rules={[
            {
              required: true,
              message: '响应头必须输入！',
            },
          ]}
        />
        <ProFormRadio.Group
          name="status"
          label={'运行状态'}
          options={[
            {
              value: 0,
              label: '未启用',
            },
            {
              value: 1,
              label: '运行中',
            },
          ]}
        />
      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default CreateModal;
